<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function $(Nid){
            return document.getElementById(Nid);
            }
         i = null
        isRunning = false
        window.onload = function(){
             function startF(){
                time = setInterval(() => {
                    i++
                    $("sec").innerHTML = num(parseInt(i%60))
                    $("min").innerHTML = num(parseInt(i/60))
                    $("hour").innerHTML = num(parseInt(i/3600))
                }, 1000);
            };
            function pauseF(){
                clearInterval(time)
            };
            $("reset").onclick = function(){
                clearInterval(time)
                $("sec").innerHTML = num(0)
                $("min").innerHTML = num(0)
                $("hour").innerHTML = num(0)
                i=0
                isRunning = false
                $("start").innerHTML = "开始"
            }
            $("start").onclick = function(){
                if(!isRunning){
                    $("start").innerHTML = "暂停"
                    isRunning = true
                    startF()
                }else{
                    $("start").innerHTML = "开始"
                    isRunning = false
                    pauseF()
                }
            }
        }

        function num(n){
            if(n<10){
                return "0"+n;
            }else{
                return n
            }
        }
         
    </script>
    <style>

    </style>
</head>
<body>
    <div id = div1>
        <span id = "hour">00</span>
        <span>:</span>
        <span id = "min">00</span>
        <span>:</span>
        <span id = "sec">00</span>
        <br/>
        <button id = 'start' >开始</button>
        <button id = 'reset' >复位</button>
    </div>
</body>
</html>